<template>
  <div>
    <div class="box">
      <van-cell>
        <template #title>
          <van-field
            v-model="names"
            label="商品名"
            placeholder="请输入商品名"
          />
          <van-field
            v-model="fieldValue"
            is-link
            readonly
            label="商品类型"
            placeholder="选择商品类型"
            @click="showPicker = true"
          />
          <van-popup v-model:show="showPicker" round position="bottom">
            <van-picker
              :columns="columns"
              @cancel="showPicker = false"
              @confirm="onConfirms"
            />
          </van-popup>
          <van-field v-model="gg" label="规格" placeholder="1000g | ±50g" />
          <van-field
            v-model="price"
            label="商品价格"
            placeholder="请输入商品价格"
          />
          <van-cell title="选择单个日期" :value="date" @click="show = true" />
          <van-calendar v-model:show="show" @confirm="onConfirm" />
          <van-field
            v-model="bzDate"
            label="保质期"
            placeholder="请输入保质期(天数)"
          />
          <van-field
            v-model="goodsDetail"
            label="商品描述"
            placeholder="请输入商品描述"
          />
          <van-field name="photo" label="封面">
            <template #input>
              <van-uploader
                :max-count="1"
                v-model="fileList"
                :after-read="afterRead"
              />
            </template>
          </van-field>

          <van-button type="primary" block @click="add">新增</van-button>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs, watchEffect } from "vue";
import { getGoodsTypes, SupplierAddGoods, Upload } from "../api/good";
import { showSuccessToast, showConfirmDialog } from "vant";
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();
    const data = reactive({
      columns: [
        { text: "", value: "", disabled: true },
        { text: "", value: "", disabled: true },
        { text: "", value: "", disabled: true },
        { text: "", value: "", disabled: true },
        { text: "", value: "", disabled: true },
        { text: "", value: "", disabled: true },
        { text: "", value: "", disabled: true },
        { text: "", value: "", disabled: true },
        { text: "", value: "", disabled: true },
        { text: "", value: "", disabled: true },
        { text: "", value: "", disabled: true },
      ],
      fieldValue: "",
      showPicker: false,
      date: "", //生产日期
      show: false,
      names: "", //商品名
      gg: "", //规格
      price: "", //商品价格
      bzDate: "", //保质期
      goodsDetail: "", //商品描述
      fileList: [],
      fieldValues: "",
      ww: "", //商品类型
      photo: "", //图片
    });

    //日历
    const formatDate = (date) =>
      `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    const onConfirm = (value) => {
      data.show = false;
      data.date = formatDate(value);
    };

    //选择器
    const onConfirms = ({ selectedOptions }) => {
      data.showPicker = false;
      data.fieldValue = selectedOptions[0].text;
      data.fieldValues = selectedOptions[0].value;
    };

    const methods = {
      bindData() {
        getGoodsTypes({}).then((res) => {
          if (res.result === 0) {
            res.data.forEach((d, i) => {
              data.ww = res.data[i].id;
              data.columns[i].text = res.data[i].name;
              data.columns[i].value = res.data[i].id;
              if (i < data.columns.length - 1) {
                data.columns[i].disabled = false;
              }
            });
          }
        });
      },
    };

    watchEffect(() => {
      methods.bindData();
    });

    const event = {
      afterRead(file) {
        console.log(file, file);
        // 此时可以自行将文件上传至服务器
        const formData = new FormData();
        formData.append("file", file.file);
        Upload(formData).then((res) => {
          console.log(res, "res");
          data.photo = res;
        });
      },
      add() {
        showConfirmDialog({
          message: "确认新增吗",
        })
          .then(() => {
            SupplierAddGoods({
              name: data.names,
              price: data.price,
              type: data.fieldValues,
              specs: data.gg,
              photo: data.photo,
              explain: data.goodsDetail,
              birthday: data.date,
              expiryday: data.bzDate,
            }).then((res) => {
              if (res.result === 0) {
                showSuccessToast("新增成功");
                setTimeout(() => {
                  showConfirmDialog({
                    message: "确认继续新增吗",
                  })
                    .then(() => {
                      router.push({ path: "/shangpin/addGoods" });
                    })
                    .catch(() => {
                      router.push({ path: "/shangpin" });
                    });
                }, 1000);
              }
            });
          })
          .catch(() => {});
      },

      //   });
      //   SupplierAddGoods({
      //     name: data.names,
      //     price: data.price,
      //     type: data.fieldValues,
      //     specs: data.gg,
      //     photo: data.photo,
      //     explain: data.goodsDetail,
      //     birthday: data.date,
      //     expiryday: data.bzDate,
      //   }).then((res) => {
      //     if(res.result===0){
      //       showSuccessToast("新增商品成功");
      //           showConfirmDialog({
      //             message: "确认继续新增吗",
      //           })
      //             .then(() => {
      //               router.push({ path: "addGoods" });
      //             })
      //             .catch(() => {
      //               router.push({ path: "goods" });
      //             });
      //     }
      //   });
      // },
    };

    return {
      ...toRefs(data),
      ...event,
      onConfirm,
      onConfirms,
    };
  },
};
</script>

<style scoped>
.box {
  margin: 5px;
  padding: 5px;
}
</style>